<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>佳丽列表</title>
  <script src="js/vue.js"></script>
</head>

<body>
<div id="app"></div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        inputValue: '',
        list: []
      }
    },
    methods: {
      handleAddItem() {
        this.list.push(this.inputValue)
        this.inputValue = ''
      }
    },
    template: `
            <div>
                <my-title />
                <input v-model="inputValue" />
                <button v-on:click="handleAddItem">增加佳丽</button>
                <ul>
                    <my-jiali
                        v-for="(item,index) of list"
                        v-bind:item="item"
                        v-bind:index="index"
                    />
                </ul>
            </div>

        `
  })
//组件
  app.component('my-title', {
    template: '<h1 style="text-align:center">象牙山洗脚城</h1>'
  })
//组件，标签名，属性内容，应用的时候，需要模板来展示，未来可以由后端提供数据
  app.component('my-jiali', {
    props: ['item', 'index'],
    template: ` <li >[{{index}}]-{{item}}</li>`
  })
  app.mount("#app")
</script>

</html>
